import React, { useState } from 'react';
import { Table, Radio, Button, DatePicker } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import styles from './HistoryTable.module.less';

const HistoryTable: React.FC = () => {
  const navigate = useNavigate();
  const [currentPage, setCurrentPage] = useState(1);
  const [viewType, setViewType] = useState<'chart' | 'table'>('table');

  // 表格列定义
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      align: 'center' as const,
    },
    {
      title: '用水单位名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
    },
    {
      title: '用水量(万m³)',
      dataIndex: 'usage',
      key: 'usage',
      width: 200,
      align: 'center' as const,
    },
    {
      title: '同比(%)',
      dataIndex: 'yearOnYear',
      key: 'yearOnYear',
      width: 200,
      align: 'center' as const,
    },
    {
      title: '环比(%)',
      dataIndex: 'monthOnMonth',
      key: 'monthOnMonth',
      width: 200,
      align: 'center' as const,
    },
  ];

  // 生成模拟数据
  const generateData = () => {
    return Array.from({ length: 100 }, (_, i) => ({
      key: i + 1,
      index: i + 1,
      name: '灌区',
      usage: '13.69',
      yearOnYear: '13.69',
      monthOnMonth: '13.69',
    }));
  };

  const data = generateData();

  return (
    <div className={styles.container}>
      <div className={styles.header}>

      </div>

      <div className={styles.content}>
        <div className={styles.filterBar}>
          <Radio.Group defaultValue="month" buttonStyle="solid">
            <Radio.Button value="day">日</Radio.Button>
            <Radio.Button value="month">月</Radio.Button>
            <Radio.Button value="year">年</Radio.Button>
          </Radio.Group>
          <DatePicker.RangePicker 
            placeholder={['开始时间', '结束时间']}
            style={{ marginLeft: 16 }}
          />
          <Button type="primary" style={{ marginLeft: 16 }}>查询</Button>
          <Button style={{ marginLeft: 8 }}>重置</Button>
          <Button 
          type="link" 
          icon={<LeftOutlined />} 
          onClick={() => navigate('/service/guangai')}
          className={styles.backButton}
          style={{ position: 'absolute', right: '20px' }}
        >
          返回
        </Button>
        </div>

        <div className={styles.tableHeader}>
          <div className={styles.title}>
            <span className={styles.dot} />
            灌区2022年1月-2023年1月过水量同比环比
          </div>
          <div>
            <Button 
              type={viewType === 'chart' ? 'primary' : 'default'}
              onClick={() => {
                setViewType('chart');
                navigate('/service/history');
              }}
            >
              图表
            </Button>
            <Button 
              type={viewType === 'table' ? 'primary' : 'default'}
              onClick={() => setViewType('table')}
              style={{ marginLeft: 8 }}
            >
              表格
            </Button>
          </div>
        </div>

        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            current: currentPage,
            pageSize: 12,
            total: data.length,
            showQuickJumper: true,
            showSizeChanger: false,
            onChange: (page) => setCurrentPage(page),
            showTotal: (total) => `共 ${total} 条`,
            itemRender: (page, type, originalElement) => {
              if (type === 'prev') return <a>上一页</a>;
              if (type === 'next') return <a>下一页</a>;
              return originalElement;
            },
          }}
          className={styles.table}
        />
      </div>
    </div>
  );
};

export default HistoryTable;
